<script lang="ts">
import { TeleportAntdModalFooter } from '~comp/antd-assist';

export const rewardInfoPopup = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./RewardPopup.vue')),
  {
    title: toRef(() => $t('hzy2h5iwLZaTxQvd24')),
    wrapClassName: 'ant-cover__Modal-drawer',
    centered: true,
    footer: null,
  },
);
</script>

<script lang="ts" setup>
const props = defineProps<{
  code: string;
  url: string;
}>();
const emits = defineEmits<{
  close: [];
}>();
const appStore = useAppStore();
const { inviteStats } = queries.useInviteStatisticsQuery();
const commsionInfo = computed(() => inviteStats.value?.commission_shares);
const maxCommission = computed(() => {
  return commsionInfo.value && Math.max(...commsionInfo.value.map(i => i.commissions));
});
</script>

<template>
  <div class="grid mb-1 gap-4 text-sm">
    <TCard class="px-3 py-5" icon="i-local:earn" :title="$t('d82rcL5rVcS90gvFf00d', { platform: appStore.appName })">
      <I18nT v-if="commsionInfo" keypath="e8RubkhxcsFjhe2bz_7d" tag="p" class="text-sys-text-body">
        <template #rate>
          {{ bignumber(commsionInfo?.[0]?.coefficient).multipliedBy(maxCommission!).multipliedBy(100) }}
        </template>
      </I18nT>
      <div class="mt-2 rounded-2 bg-sys-layer-c p-3 text-sys-text-body">
        <div class="flex-between">
          <div class="text-sys-text-head">
            {{ $t('bblXesmCulWv0GyYrU4Gy') }}:
          </div>
          <THelptip>
            <div class="text-xs">
              <div class="text-sm text-sys-text-head">
                {{ $t('u5TsngFEyBximWjG4Hc6w') }}
              </div>
              <div v-for="(item, index) of commsionInfo" :key="index" class="mt-1 flex flex-wrap items-center">
                <div>
                  {{ item.game_name }}：
                </div>
                <I18nT keypath="pQpWz2y3kmaYJXr1uKlc" tag="div" class="text-sys-text-head">
                  <template #num>
                    {{ bignumber(item.commissions).multipliedBy(item.coefficient).multipliedBy(100) }}
                  </template>
                </I18nT>
              </div>
            </div>
          </THelptip>
        </div>
        <div class="mt-2 flex gap-1">
          <div v-for="(item, index) of commsionInfo" :key="index">
            {{ item.game_name }}: <span class="text-sys-text-head">{{ bignumber(item.commissions).multipliedBy(item.coefficient).multipliedBy(100) }}%</span>
          </div>
        </div>
      </div>
      <div class="mt-2 rounded-2 bg-sys-layer-c p-3 text-sys-text-body">
        {{ $t('eiwLsXx4O7_5fxZBdKv4u') }}
      </div>
    </TCard>

    <TCard class="px-3 py-5" icon="i-local:share" :title="$t('jzKTFnJnl15IrYnhoeY')">
      <p class="text-sm text-sys-text-body">
        {{ $t('b7RsRal5WyQaGvV3bP7Y') }}
      </p>
      <div class="mt-2 flex items-center gap-2">
        <i class="i-local:balance text-14" />
        <div>
          <p class="text-sm text-sys-text-body">
            {{ $t('xteKs6Q2umgTy6tCfz5mP') }}
          </p>
          <p class="flex items-center gap-2 text-xl text-sys-text-body">
            <span class="share-item">0%</span>/
            <span class="share-item">25%</span>/
            <span class="share-item">50%</span>/
            <span class="share-item">100%</span>
          </p>
        </div>
      </div>
    </TCard>

    <TeleportAntdModalFooter footerClass="!max-w-none">
      <AButton
        class="ant-cover__Button-3d-gray flex-1"
        type="primary" block
        @click="emits('close')"
      >
        {{ $t('pFexkGv2pL4Nl4GmT9ZZm') }}
      </AButton>
      <AButton
        class="ant-cover__Button-3d-primary flex-1"
        type="primary" block
        @click="[globalPopups.referralShare.open({ code: props.code, url: props.url }), emits('close')]"
      >
        {{ $t('6CuHqQjSdUsoRQuyMYj') }}
      </AButton>
    </TeleportAntdModalFooter>
  </div>
</template>

<style lang="scss" scoped>
.share-item {
  --uno: 'text-sys-text-head relative';
}
</style>
